<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
</head>

<body class="layui-layout-body">

<!--头-->
<!--在html的head元素中通过th:replace属性引入，值为模板的路径，
不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
<div th:replace="head :: header"></div>


<div class="layui-body layui-container" style="margin:70px 0px 0px 20px; ">

<!--    自动渲染的方式-->
<!--    <table class="layui-table"-->
<!--           lay-data="{height:500,width:1260, url:'/parent-info/getListOfParents', page:true, id:'test'}"-->
<!--           lay-filter="test">-->
<!--        <thead>-->
<!--        <tr>-->
<!--            <th lay-data="{checkbox:true}"></th>-->
<!--            <th lay-data="{field:'studentId', width:190, }">学生身份证</th>-->
<!--            <th lay-data="{field:'parentsName', width:80}">家长</th>-->
<!--            <th lay-data="{field:'parentsNumber',width:120,}">家长联系方式</th>-->
<!--            <th lay-data="{field:'relationship', width:80,}">关系</th>-->
<!--            <th lay-data="{field:'email' ,width:180,}">邮箱</th>-->
<!--            <th lay-data="{field:'departmentId', width:80, sort: true}">班级</th>-->
<!--            <th lay-data="{field:'parentDeptId', width:80, }">年级</th>-->
<!--            <th lay-data="{field:'personNo',width:120,}">学号</th>-->
<!--            <th lay-data="{field:'studentName', width:80  }">学生</th>-->
<!--            <th lay-data="{field:'studentName',}">操作</th>-->

<!--        </tr>-->
<!--        </thead>-->
<!--    </table>-->

    <table class="layui-hide" id="test" lay-filter='test'></table>

    <hr style="color:blue">

    <div id="layerDemo">
        <button type="button" class="layui-btn layui-btn-sm" data-method="notice">
            <i class="layui-icon layui-icon-add-circle" style="font-size: 10px; color: white;"></i> 新增
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit lay-filter="delete">
            <i class="layui-icon layui-icon-reduce-circle" style="font-size: 10px; color: white;"></i>删除
        </button>
    </div>

</div>

<script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
<script>
    layui.use(['table', 'layer','laypage','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#test',
            id: 'tableId',
            url: 'parent/getParentList',
            method:'get',
            title: '用户信息表',
            totalRow: true,
            height: 520,
            width:550,
            cols: [
                [
                {type: "numbers", fixed: 'aa'}
                ,{type: "checkbox", fixed: 'aa'}
                , {field: 'studentName', title: '学生姓名', width: 100}
                , {field: 'personNo', title: '学号', sort:true ,width: 120}
                , {field: 'departmentId', title: '班级', width: 80 }
                , {field: 'parentDeptId', title: '年级', width: 80}

            ]
            ],
            page: true , // 分页
            elem: '#test',
            limit:10,
            parseData: function (res) {
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.data.length, "data": result};
            }

        });


        //触发事件
        var active = {
            notice: function () {
                //示范一个公告层
                layer.open({
                    type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                    , title: false //不显示标题栏
                    , closeBtn: 1
                    , area: ['460px', '200px']//定义宽高
                    , shade: 0.8//遮幕
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    // ,btn: [ '表格','取消']
                    , btnAlign: 'c'//按钮排列：居中对齐
                    , moveType: 1 //拖拽模式，0或者1
                    , resize: true
                    , content: '/userform'//跳转到想要的界面，这里是我自己项目的跳转界面
                    ,
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: '${path}'
                            , target: '_blank'
                        });
                    }
                })
            }
        }
        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        // 删除用户
        form.on('submit(delete)',function(data){
            var checkStatus = table.checkStatus('tableId'); //idTest 即为基础参数 id 对应的值
            console.log(checkStatus.data[0].personNo) //获取选中行的数据
            console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll ) //表格是否全选

            $.ajax({
                url:'/parent/deleteParent',
                type:'POST',
                data:{
                    "id": checkStatus.data[0].personNo
                },
                success:function(data){
                    if(data.code==1){
                        layer.msg("删除成功",function() {time:1000});
                        parent.location.reload();
                    }else{
                        layer.msg("删除失败",function() {time:1000})
                    }
                }
            })
        })

    });


</script>


</body>
</html>

